<template>
  <div class="classroom-container">
    <div class="classroom-header">
      <h3>浏览历史</h3>
      <el-radio-group @input="changetimeType" v-model="learningParams.timeType" style="margin-left: auto;"
                      size="small">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="1">当年</el-radio-button>
        <el-radio-button label="2">当月</el-radio-button>
      </el-radio-group>
    </div>
    <div class="classroom-echarts">
      <div class="classroom-echarts-title">
        <label>学习记录</label>
        <span>姓名：{{studentInfo.studentName}}</span>
      </div>
      <div v-if="chartEcharts" class="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
      <div v-else>
        <browseEcharts :recordList="recordList" />
      </div>
    </div>
    <el-tabs type="border-card" v-model="filterForm.menuCode" @tab-click="handleTabsClick">
      <el-tab-pane v-for="tab in tabList" :key="tab.menuCode" :label="tab.menuName"
                   :name="tab.id">
      </el-tab-pane>
    </el-tabs>
    <List :dataList="contestList" @refresh="getPageList" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// eslint-disable-next-line import/no-cycle
import dictApi from '@/framework/api/dict'
import List from '../../components/recordList'
import browseEcharts from './browseEcharts'
import { getPage, del, getHistoryInfoPage, getHistoryInfoList } from '@/api/classroom/learnVideoManage'
import { getMenuListByType } from '@/api/classroom/videoReview'

export default {
  name: 'BrowsingHistory',
  components: { List, browseEcharts },
  data() {
    return {
      contestList: [
      ],
      filterForm: {
        menuCode: null
      },
      tabList: [],
      queryParams: {
        pageNo: 1, // 页码
        pageSize: 10, // 页容量
        // studentId: "1742743548828106754",
        studentId: '',
        menuId: null,
        videoName: null
      },
      learningParams: {
        timeType: '2',
        // studentId: "1742743548828106754",
        studentId: ''
      },
      recordList: {},
      dictType: 'subject',
      dictList: [],
      // userName: this.$store.getters.name,
      chartEcharts: true
    }
  },
  computed: {
    ...mapGetters(['studentInfo'])
  },
  watch: {
    studentInfo: {
      handler(val) {
        if (val.id) {
          this.queryParams.studentId = this.studentInfo.id
          this.learningParams.studentId = this.studentInfo.id
          this.getRecords()
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // 初始化，获取菜单
    this.getMenu()
    if (localStorage.getItem('subject_dictList')) {
      this.dictList = JSON.parse(localStorage.getItem('subject_dictList'))
    } else {
      this.getDictData()
    }
  },
  methods: {
    // 获取菜单列表
    getMenu() {
      getMenuListByType().then((res) => {
        if (res.code == '00000') {
          this.tabList = res.data
          // 初始化页面默认查询
          const tab = {
            name: res.data[0].id
          }
          if (this.studentInfo.id) {
            this.handleTabsClick(tab)
          } else {
            this.$alert('您还没有学生，无法查看浏览历史，快去添加学生吧', '提示', {
              confirmButtonText: '去添加',
              showClose: false,
              callback: () => {
                this.$router.push({
                  path: '/onlineClassroom/studentInfo'
                })
              }
            })
          }
        }
      })
    },
    // 查询历史记录
    getList() {
      getHistoryInfoPage(this.queryParams).then((res) => {
        if (res.code == '00000') {
          this.contestList = res.data.rows.map((item) => {
            return {
              collectSts: '0',
              vedioDict: '1', // 信息分类1浏览历史2我收藏
              ...item
            }
          })
        }
      })
    },
    // 选项卡
    handleTabsClick(tab) {
      this.filterForm.menuCode = tab.name
      this.queryParams.menuId = tab.name
      this.getList()
    },
    // 查询历史记录
    getPageList(data) {
      this.queryParams = { ...this.queryParams, ...data }
      this.getList()
    },
    // 查看不同时间段的学习记录
    changetimeType(val) {
      this.learningParams.timeType = val
      this.recordList = {}
      this.chartEcharts = true
      this.getRecords()
    },
    // 获取学习记录
    getRecords() {
      getHistoryInfoList(this.learningParams).then((res) => {
        if (res.code == '00000') {
          const subjectList = []
          const studyNumList = res.data.map((item) => item.studyNum)
          res.data.forEach((element) => {
            subjectList.push(this.getDict(element.subject))
          })
          if (subjectList.length > 0 && studyNumList.length > 0) {
            this.recordList = {
              subjectList,
              studyNumList
            }
            this.chartEcharts = false
          }
        }
      })
    },
    // 获取学科
    getDict(data) {
      const dict = this.dictList.find((item) => item.dictCode == data)
      return dict && dict.dictName
    },
    // 获取学科字典值列表
    getDictData() {
      dictApi.fetchList(this.dictType).then((res) => {
        if (res.code == '00000') {
          const dictList = res.data.map((item) => {
            return {
              dictCode: item.dictCode,
              dictName: item.dictName
            }
          })
          this.dictList = dictList
          localStorage.setItem('subject_dictList', JSON.stringify(dictList))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom-container {
  .classroom-echarts {
    width: 100%;
    height: 398px;
    background-color: #fff;
    box-shadow: 0 3px 6px #00000029;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: "Source Han Sans CN";
      font-size: 20px;
      color: #00080f;
      margin-bottom: 8px;
      label {
        font-weight: 700;
      }
      span {
        font-weight: 400;
      }
    }
    .empty {
      width: 200px;
      text-align: center;
      margin: 19px auto 0;
    }
    .browseEcharts {
      height: 100%;
    }
  }
  .classroom-header {
    display: flex;
  }
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
::v-deep .el-tabs--border-card {
  border: none;
  border-top: 1px solid #DCDFE6;
}
::v-deep .el-tabs__item {
  font-size: 18px;
  height: 55px;
  line-height: 55px;
}
::v-deep .classroom-list-wrap {
  padding-top: 0;
}
</style>
